<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化属性（10个属性）</title>
		<!-- 文本格式化属性（4种方式，10个属性）
		!!:重要的 需要会
		1.控制字体：font-family !!、font-size !!、font-weight !!
		2.控制文本布局【对齐、间隙】：text-align !!、line-height !!、letter-spacing,word-spacing
		3.文本修饰效果：text-decoration !!,text-shadow
		4.处理文本效果:white-apace !!
		 -->
		<style>
			/*知识点：CSS3语法：选择器{
				            属性： 属性值；
							属性： 属性值；
							}
							叫法：一个样式
						id选择器语法：html元素加 id="别名"
						             css中加 #别名选中
						提醒：加权  元素选择器  权值：1
						           id选择器    权值：100
								   权值高的可以锁定目标
							*/
			div#d1{
			color: aquamarine;
			/*知识点1：文本格式化属性-->1.针对控制文字
			font-family: 字体家族：微软雅黑，sans-serif（黑体）
			问题：可以设置多个字体，浏览器按照顺序找字体！
			处于兼容考虑：用户电脑字体，可能存在缺失，会对应找一个可以使用的字体！*/
		   font-family: 华文彩云,sans-serif;
		   
		   /*知识点2：文本格式化属性-->2.针对控制文字
		   font-size:字体尺寸：常用表示 px/em;
		   px---PC端----像素，特点：绝对值
		   em---移动端---特点：相对于父元素字体大小，以倍数形式放大*/
		   font-size: 2em;
		   
		   /*知识点3：文本格式化属性-->3.针对控制文字
		   font-weight:字体粗细程度属性：100...900 
		   用法：全局字体，通配选择器中使用，400和700
		   400(正常粗细大小) 对应 normal正常
		                        bold相对于父元素加粗
								light相对于父元素变细*/
		  font-weight: light;
		  
			}
			#d1{color: aqua;}
			
			div h1.c1{
				/*知识点4：文本格式化属性---针对文本格式
				text-align:字体位置*/
				text-align: justify;
				/*justify：两端对齐：要求字体空间长一些，使用位置：弹性布局*/
				
				color: hotpink;
			}
			
			/* 派生选择器[后代选择器] */
			div span{
				
				border: 1px solid red;
				height: 60px;
				/* 行元素转换为块元素:行元素不可以设置高度 */
				display: block;
				/* 知识点5:文本格式化属性--文本对齐方式[垂直] 
				line-height:行高属性
				使用方式:一定跟高度一起出现[垂直]
				*/
			   line-height: 60px;
			   /* 知识点6:文本格式化属性--文本间隙[字符] */
			   lett er-spacing: 5px;
			   /* 知识点7:文本格式化属性--文本间隙[单词] */
			   word-spacin g: 10px;
			   /* 补充:1.所有的单词大写 2.所有单词首字母大写 3.实现首行缩进200px */
			   text-transform: uppercase;
			   text-transform: capitalize;
			   text-indent: 200px;
			}
		
		    a{
			/* 知识点8:文本修饰效果,针对超链接
			 使用方法:与通配选择器一起使用
			 none:去掉超链接的下划线
			 underline:默认下划线,切换
			 line-throungh:删除线,被html5中s元素取代
			 */
			text-decoration: line-through;
			/* 知识点9:文本修饰效果,针对超链接和文本
			 text-shadow 文本阴影属性
			 属性值:X值,Y值 blur模糊距离 颜色;
			 */
			text-shadow: 5px 5px 10px #f00;
		     }
			 
			 p{
				 border: 1px solid red;
				 /* 知识点10:white-space: 换行属性
				 属性值不同效果不同
				  nowrap  效果:不换行 作用:在一行显示,不可以超出范围
				          使用特点:溢出
				  pre     效果:保留空格和回车
				  normal  默认,
				  */
				  wh ite-space: nowrap;  /*不换行,就一行*/
				 overflow: hidden;  /*其他行省略*/
				 w hite-space: pre;  /*保留原始文本控股和回车*/
				 white-space: normal;  /*默认,空格合并,自动换行*/
			 }
		</style>
	</head>
	<body>
		<h1>处理文本效果[换行和溢出]</h1>
		<p>Lorem ipsum dolor sit, amet c
		onsectetur adipisicing elit. Quibusdam i
		taque repellendus perspiciatis laudantiu
		m quod debitis tempore impedit sapiente minus iste ex culpa quae, non ipsum rem natus quis. Nam, sunt? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse optio totam ad cumque! Blanditiis temporibus, accusamus vitae iusto similique incidunt ab! At delectus velit quas, tenetur dolorem et debitis beatae. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Enim facilis repellat fugit sit accusantium aliquid id laudantium? Incidunt ad dolore delectus debitis reiciendis necessitatibus nobis quia ipsam laudantium, doloribus natus! </p>
		
		
		
		
		
		
		
		
		
		<h1>
			<marquee>控制文本布局【对齐、间隙】</marquee>
		</h1>
		<!-- 需求:创建div,内嵌span元素,增加假文 
		          设置样式:添加1个像素实线边框,增加高度25px
				          使用派生选择器找到span元素-->
		<div><span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis praesentium accusantium, sequi accusamus fugit consequuntur reprehenderit. Aperiam quasi quos voluptatibus, consectetur distinctio quia cumque officiis dolore facilis iusto deleniti labore?</span></div>
		<!-- 需求:创建a元素,超链接跳转到唐工官网 -->
		<div style="height:200px;"></div>
		<h1>文本修饰效果</h1>
		<a href="http://www.tsgzy.edu.cn">跳转到唐工的官网</a>
		
		
		
		
		
		
		<div id="d1">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab labore consectetur corrupti? Ex, itaque in, delectus rem animi a id accusamus, cum aperiam molestias cupiditate voluptates consequatur quas dicta numquam.</div> 
		/*div：是一个有宽没高的空间*/
		<!-- 需求：外层div  内层h1，起两个别名，css3用任意别名字体设置颜色
		     要求：加权方式   派生-->
		<div>
			<h1 class="c1 c2">lorem</h1>
		</div>
	</body>
</html>